<template>
  <el-row>
    <el-col :span="4"><div class="grid-content "><br/></div></el-col>
    <el-col :span="16"><div class="grid-content ">
      <div>
        <el-button type="primary" style="float: right" @click="openAdd">新增商品</el-button>
        <el-col>
          <h3>我的商品清单</h3>
        </el-col>

        <el-table
            :data="tableData"
            stripe
            style="width: 100%">
          <el-table-column
              prop="goodsid"
              label="商品Id"
              width="180" v-if="false">
          </el-table-column>
          <el-table-column
              prop="goodsname"
              label="商品名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="goodskind"
              label="类型"
              width="180">
          </el-table-column>
          <el-table-column
              prop="goodssize"
              label="规格"
              width="180">
          </el-table-column>
          <el-table-column
              prop="goodsnum"
              label="数量"
              width="180">
          </el-table-column>
          <el-table-column label="操作" align="right">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="edit(scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block" align="left">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15,20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="pageTotal">
          </el-pagination>
        </div>

        <el-dialog title="新增商品" :visible.sync="dialogFormVisible" width="400px"  >
          <el-form :model="form" :rules="rules" ref="form" class="demo-form">

            <el-form-item label="商品名称" :label-width="formLabelWidth" prop="goodsName">
              <el-input v-model="form.goodsName" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="商品规格" :label-width="formLabelWidth" prop="goodsSize">
              <el-input v-model="form.goodsSize" autocomplete="off" ></el-input>
            </el-form-item>
            <el-form-item label="商品类别" :label-width="formLabelWidth" >
              <el-select v-model="typeid" placeholder="请选择" @change="changeType" >
                <el-option
                    v-for="item in options"
                    :key="item.typeid"
                    :label="item.typename"
                    :value="item.typeid"
                    @change="handleChange">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品数量" :label-width="formLabelWidth" prop="goodsNum">
              <el-input v-model="form.goodsNum" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addGoods('form')">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="修改商品" :visible.sync="dialogFormVisible1" width="400px">
          <el-form :model="form1">

            <el-form-item label="商品名称" :label-width="formLabelWidth">
              <el-input v-model="form1.goodsName" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="商品规格" :label-width="formLabelWidth">
              <el-input v-model="form1.goodsSize" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="商品类别" :label-width="formLabelWidth">
              <el-input v-model="form1.goodsKind" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" :label-width="formLabelWidth">
              <el-input v-model="form1.goodsNum" autocomplete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateGoods">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div></el-col>
    <el-col :span="4"><div class="grid-content "></div></el-col>
  </el-row>



</template>

<script>
export default {
  name: "GoodsView",
  data(){
    return{
      tableData:[],
      options:[],
      typeid:'',
      typename:'',
      dialogFormVisible:false,
      dialogFormVisible1:false,
      pageSize:5,
      pageTotal:0,
      currentPage:1,
      form:{
        goodsName:'',
        goodsSize:'',
        goodsKind:'',
        goodsNum:'',
      },
      rules:{
        goodsName:[
          { required: true, message: '商品名称', trigger: 'blur' },

        ],
        goodsSize:[
          { required: true, message: '商品规格', trigger: 'blur' },
        ],

        goodsNum:[
          { required: true, message: '商品数量', trigger: 'blur' },
        ],

      },
      form1:{
        goodsName:'',
        goodsSize:'',
        goodsKind:'',
        goodsNum:'',
        goodsId:'',
      },
      formLabelWidth: '80px'
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      this.$axios.get("/psc/goods/findAll/"+sessionStorage.getItem("userNumber")+"/"+this.currentPage+"/"+this.pageSize).then(
          r=>{
            console.log(r.data)
            this.tableData=r.data.list
            this.pageTotal=r.data.pageTotal;
            console.log(r.data)
          }
      )
    },
    handleSizeChange(val){
      this.pageSize=val;
      this.init()
    },handleCurrentChange(val){
      this.currentPage=val
      this.init()
    },
    addGoods(formName){
      let fd=new FormData()

      fd.append("goodsname",this.form.goodsName)
      fd.append("goodssize",this.form.goodsSize)
      fd.append("goodskind",this.typename)
      fd.append("goodsnum",this.form.goodsNum)
      fd.append("usernumber",sessionStorage.getItem("userNumber"))
      this.$refs[formName].validate((valid) => {
        if (valid) {

          this.$axios.post("/psc/goods/addGoods",fd).then(
              r=>{
                console.log(r.data)
                this.dialogFormVisible = false
                this.form={}
                this.typename=''
                this.init()
                if(r.data){
                  this.$message.info('添加成功')

                }else {
                  this.$message.error('添加成功，请检查输入内容');
                }
              }
          )
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    edit(row){
      this.dialogFormVisible1 = true
      this.form1.goodsId=row.goodsid
      this.form1.goodsName=row.goodsname
      this.form1.goodsSize=row.goodssize
      this.form1.goodsKind=row.goodskind
      this.form1.goodsNum=row.goodsnum

    },
    updateGoods(){
      let fd=new FormData()
      fd.append("goodsid",this.form1.goodsId)
      fd.append("goodsname",this.form1.goodsName)
      fd.append("goodssize",this.form1.goodsSize)
      fd.append("goodskind",this.form1.goodsKind)
      fd.append("goodsnum",this.form1.goodsNum)
      this.$axios.post("/psc/goods/updateById",fd).then(
          r=>{
            console.log(r.data)
            this.dialogFormVisible1 = false
            this.init()
          }
      )
    },
    handleDelete(row){
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form1.goodsId=row.goodsid
        this.$axios.get("/psc/goods/delById/"+this.form1.goodsId).then(
            r=>{
              console.log(r.data)
              this.dialogFormVisible = false
              this.init()
            }
        )
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    openAdd(){
      this.$axios.get("/psc/sup-type/findAllType").then(
          r=>{
            this.options=r.data
            console.log(this.options)
            console.log(r.data)

          })
      this.form.abc=1
      this.dialogFormVisible = true

    },
    handleChange(){
      this.$forceUpdate()
    },
    changeType(typeid){
      let obj={}
      obj=this.options.find((item)=>{
        return item.typeid==typeid
      });
      this.typename=obj.typename
      console.log(obj.typename)

    },
  }
}
</script>

<style scoped>

</style>